<template>
  <div>
    <div class="tuwen_box">

        <el-form label-width="120px">
            <el-form-item label="样式选择：">
                <el-radio-group v-model="active_component.propValue.tabIndex">
                    <el-radio-button label="1">左图右文</el-radio-button>
                    <el-radio-button label="2">上图下文</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="卡片icon">
            <el-input
                v-model="active_component.propValue.icon"
                clearable
            ></el-input>
                    <Upload :text="'上传图片'" @confrim="confrim" :type="'primary'"></Upload>
            </el-form-item>
              <el-form-item label="图片大小">
                <div class="flex">
                    <el-form-item label="宽" label-width="20px">
                    <el-input v-model="active_component.propValue.imgwidth" clearable></el-input>
                    </el-form-item>
                      <el-form-item label="高" label-width="60px">
                        <el-input v-model="active_component.propValue.imgheight" clearable ></el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="标题">
                <el-input
                    v-model="active_component.propValue.title"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="文本内容">
                <el-input
                    type="textarea"
                    v-model="active_component.propValue.content"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="边框阴影">
                <el-switch v-model="active_component.propValue.shadow"></el-switch>
            </el-form-item>
      </el-form>
    </div>
    <div class="flex-center" style="margin-top:10px;">
      <el-button size="small" type="" @click="closeTK"
        >取消</el-button
      >
       <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload  from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList","activeCompont"],
  components: { Upload},
  data() {
    return {
      name: "",
      tabIndex: 0,
      active_component: {},
    };
  },

  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onremove(){
           this.active_component.propValue.icon=''
    },
    loadSuccess(res){
           this.active_component.propValue.img=res.data
    },
    confrim(e){
      this.active_component.propValue.icon=e
    },
    closeTK(){
        this.$emit("closeTK")
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {

        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 0;
          this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
                  Number(canvasStyle.height) + Number(component.style.height)
                );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    //     }
    //   }
    },
  },
};
</script>
<style>

</style>
<style lang="scss" scoped>

</style>
